<template>
  <div class="demo-container">
    <h2>Excel导入功能</h2>
    <p>支持导入Excel文件，并进行数据验证</p>

    <ExcelImporter
      :column-map="columnMap"
      :validation-rules="validationRules"
      @import-success="handleImportSuccess"
      @import-error="handleImportError"
      @validation-error="handleValidationError"
    >
      <template #trigger>
        <el-button type="primary" :icon="Upload"> 导入Excel数据 </el-button>
      </template>
      <template #tip>
        <div class="el-upload__tip">
          请上传标准格式的Excel文件 (.xlsx,
          .xls)，表头需包含：姓名、年龄、邮箱、电话等必填信息
        </div>
      </template>
    </ExcelImporter>

    <!-- 验证错误展示 -->
    <div v-if="validationErrors.length > 0" class="validation-errors">
      <el-alert title="数据验证错误" type="error" :closable="false" show-icon>
        请修正Excel中的以下错误后重新上传：
      </el-alert>
      <el-table
        :data="validationErrors"
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="row" label="行号" width="80" />
        <el-table-column prop="field" label="字段" width="120" />
        <el-table-column prop="value" label="错误值" width="150" />
        <el-table-column prop="message" label="错误信息" />
      </el-table>
    </div>

    <!-- 导入成功的数据展示 -->
    <div v-if="importedData.length > 0" class="imported-data">
      <h3>导入的数据 ({{ importedData.length }} 条记录)</h3>
      <AdvancedTable
        :data="importedData"
        :columns="columns"
        :selection="false"
        :show-index="true"
        height="400px"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { AdvancedTable, ExcelImporter } from '../components/Table'
import { validationRules as defaultRules } from '../components/Table/utils'

// 列映射关系（将Excel列名映射到对象属性）
const columnMap = {
  姓名: 'name',
  年龄: 'age',
  电话: 'phone',
  邮箱: 'email',
  地址: 'address',
  部门: 'department',
  职位: 'position',
}

// 验证规则
const validationRules = {
  name: defaultRules.name,
  age: defaultRules.age,
  phone: defaultRules.phone,
  email: defaultRules.email,
}

// 表格列定义
const columns = [
  {
    prop: 'name',
    label: '姓名',
    width: 120,
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80,
  },
  {
    prop: 'phone',
    label: '电话',
    width: 120,
  },
  {
    prop: 'email',
    label: '邮箱',
    width: 180,
  },
  {
    prop: 'address',
    label: '地址',
    minWidth: 180,
  },
  {
    prop: 'department',
    label: '部门',
    width: 120,
  },
  {
    prop: 'position',
    label: '职位',
    width: 120,
  },
]

// 导入的数据
const importedData = ref<any[]>([])

// 验证错误
const validationErrors = ref<any[]>([])

// 处理导入成功
const handleImportSuccess = (data: any[]) => {
  importedData.value = data
  validationErrors.value = []
  ElMessage.success(`成功导入 ${data.length} 条数据`)
}

// 处理导入错误
const handleImportError = (error: any) => {
  ElMessage.error(`导入失败: ${error.message || '未知错误'}`)
}

// 处理验证错误
const handleValidationError = (errors: any[]) => {
  validationErrors.value = errors
  ElMessage.error(`数据验证失败，共有 ${errors.length} 处错误`)
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

h2,
h3 {
  margin-top: 0;
}

.validation-errors {
  margin: 20px 0;
}

.imported-data {
  margin-top: 20px;
}
</style>
